<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>
    <div th:insert="main :: common_head"></div>
<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect.css}"/>-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect1.css}"/>-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect2.css}"/>-->
    <style>
        input[type="file"] {
            line-height: 27px !important;
        }
        .mylabel {
            display: inline;
        }

        .greenColor {
            color: green;
        }

        .redColor {
            color: red;
        }

        .changeI {
            display: block;
            width: 100%;
            height: 100%;
        }

        ul li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .navbar .nav>li>.dropdown-menu::before {
            display: none !important;
        }

        .navbar .nav>li>.dropdown-menu::after {
            display: none !important;
        }

        .dropdown-menu:hover,
        .dropdown-menu:hover {
            display: none !important;
        }

        .dropdown-menu:hover::before,
        .dropdown-menu:hover::after {
            display: none !important;
        }

        #myli>ul:hover::before {
            display: none;
        }

        [v-cloak] {
            display: none;
        }

        .add-form-table>div {
            width: 340px;
        }
    </style>
</head>


<body>
    <div id="app">
        <div th:if="${stationInfoDTOList.size()} gt '0' ">
            <div class="show" v-if="isShow">
                <div class="container-fluid-full">
                    <div class="row-fluid">
                        <div id="content" class="span10" style="width: 100%;">
                            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                                <li>
                                    <i class="fas fa-circle-notch"></i>
                                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                                    <i class="icon-angle-right"></i>
                                </li>
                                <li><a href="#">基本信息展示</a></li>
                            </ul>
                            <div class="row-fluid sortable">
                                <div class="box span12">
                                    <div class="box-header" data-original-title>
                                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>基本信息展示
                                        </h2>
                                    </div>

                                    <div class="box-content" th:each="stationInfoDTO:${stationInfoDTOList}">
                                        <div class="add-form-table">
                                            <div class="station-name">
                                                <label>名称:</label>
                                                <input type="text" th:value="${stationInfoDTO.stationName}" readonly>
                                            </div>
                                            <div class="station-city-code">
                                                <label>能量编码:</label>
                                                <input type="text" th:value="${stationInfoDTO.energyName}" readonly>
                                            </div>
                                            <div class="station-city-code">
                                                <label>电量编码:</label>
                                                <input type="text" th:value="${stationInfoDTO.batteryName}" readonly>
                                            </div>
                                            <div class="station-city-code">
                                                <label>省/直辖市:</label>
                                                <input type="text" th:value="${stationInfoDTO.stationArea}" readonly>
                                            </div>
                                            <div class="station-city-code">
                                                <label>楼宇面积:</label>
                                                <input type="text" th:value="${stationInfoDTO.buildingArea}" readonly>
                                            </div>
                                            <div class="work-time">
                                                <span>建筑年份:</span>
                                                <input type="text" th:value="${stationInfoDTO.constructionYear}" readonly>
                                            </div>
                                            <div class="lose-rate-time">
                                                <span>地址:</span>
                                                <input type="text" th:value="${stationInfoDTO.stationAdress}" readonly>
                                            </div>
                                            <div class="lose-rate-time">
                                                <span>Logo: </span>
                                                <img src="/multipower/images/logo.png"
                                                    style="background-color: #32536f; border-radius: 4.5px;" height="40"
                                                    width="40">
                                                <div style="width: 99px;"></div>
                                            </div>
                                        </div>

                                        <div class="form-actions" style="margin: 20px -10px 0px -10px;">
                                            <button type="submit" class="btn btn-primary"
                                                v-on:click="toEditStationInfo($event)" th:id="${stationInfoDTO.id}"
                                                ref>修改</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="add" th:if="${stationInfoDTOList.size()} lt '1' ">
            <div class="container-fluid-full">
                <div class="row-fluid">
                    <div id="content" class="span10" style="width: 100%;">
                        <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                            <li>
                                <i class="fas fa-circle-notch"></i>
                                <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                                <i class="icon-angle-right"></i>
                            </li>
                        </ul>
                        <div class="row-fluid sortable">
                            <div class="box span12">
                                <div class="box-header" data-original-title>
                                    <h2><i class="halflings-icon white edit"></i><span class="break"></span>添加基本信息</h2>
                                </div>
                                <div class="box-content">
                                    <div class="add-form-table">
                                        <div class="station-name">
                                            <label>名称:</label>
                                            <input type="text" v-model="stationData.stationName">
                                        </div>
                                        <div class="station-city-code">
                                            <label>省/直辖市:</label>
                                            <select name="provs" v-model="stationData.prov"
                                                @change='selectForProvCityArea("prov")'>
                                                <option v-for="data in provs" :value="data" name="prov">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div>
                                            <label>市/区:</label>
                                            <select name="citys" v-model="stationData.city"
                                                @change='selectForProvCityArea("city")'>
                                                <option v-for="data in citys" :value="data" name="city">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div>
                                            <label>区:</label>
                                            <select name="areas" v-model="stationData.area"
                                                @change='selectForProvCityArea("area")'>
                                                <option v-for="data in areas" :value="data" name="area">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="station-energy-code">
                                            <label>能量编码:</label>
                                            <input type="text" v-model="stationData.energyCode">
                                        </div>
                                        <div class="station-battery-code">
                                            <label>电量编码:</label>
                                            <input type="text" v-model="stationData.batteryCode">
                                        </div>
                                        <div class="station-city-code">
                                            <label>楼宇面积:</label>
                                            <input type="text" v-model="stationData.buildingArea">
                                        </div>
                                        <div class="work-time">
                                            <span>建筑年份:</span>
                                            <input type="text" v-model="stationData.constructionYear">
                                        </div>
                                        <div class="lose-rate-time">
                                            <span>地址:</span>
                                            <input type="text" v-model="stationData.stationAdress">
                                        </div>
                                    </div>
                                    <div class="form-actions" style="margin: 20px -10px 0px -10px;">
                                        <button type="submit" class="btn btn-primary"
                                            v-on:click="upsertStation($event)">提交</button>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                    </div>
                </div>
            </div>
        </div>

        <div class="edit" v-if="isEdit">
            <div class="container-fluid-full">
                <div class="row-fluid">
                    <div id="content" class="span10" style="width: 100%;">
                        <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                            <li>
                                <i class="fas fa-circle-notch"></i>
                                <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                                <i class="icon-angle-right"></i>
                            </li>
                        </ul>

                        <div class="row-fluid sortable">
                            <div class="box span12">
                                <div class="box-header" data-original-title>
                                    <h2><i class="halflings-icon white edit"></i><span class="break"></span>修改基本信息</h2>
                                </div>
                                <div class="box-content">
                                    <div class="add-form-table">
                                        <div class="station-name">
                                            <label>名称:</label>
                                            <input type="text" v-model="stationData.stationName">
                                        </div>
                                        <div class="station-city-code">
                                            <label>省/直辖市:</label>
                                            <select name="provs" v-model="stationData.prov"
                                                @change='selectForProvCityArea("prov")'>
                                                <option v-for="data in provs" :value="data" name="prov">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div>
                                            <label>市/区:</label>
                                            <select name="citys" v-model="stationData.city"
                                                @change='selectForProvCityArea("city")'>
                                                <option v-for="data in citys" :value="data" name="city">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div>
                                            <label>区:</label>
                                            <select name="areas" v-model="stationData.area"
                                                @change='selectForProvCityArea("area")'>
                                                <option v-for="data in areas" :value="data" name="area">{{data}}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="station-energy-code">
                                            <label>能量编码:</label>
                                            <el-select @change="energyChange($event)" v-model="stationData.energyPointId" filterable size="medium" placeholder="请选择"
                                                        style="margin-right: 30px!important;" >
                                                <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="station-battery-code">
                                            <label>电量编码:</label>
                                            <el-select v-model="stationData.batteryPointId" filterable size="medium" placeholder="请选择"
                                                       style="margin-right: 30px!important;" @change="batteryChange($event)">
                                                <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="station-city-code">
                                            <label>楼宇面积:</label>
                                            <input type="text" v-model="stationData.buildingArea">
                                        </div>
                                        <div class="work-time">
                                            <span>建筑年份:</span>
                                            <input type="text" v-model="stationData.constructionYear">
                                        </div>
                                        <div class="lose-rate-time">
                                            <span>地址:</span>
                                            <input type="text" v-model="stationData.stationAdress">
                                        </div>
                                        <div class="lose-rate-time">
                                            <span>logo:</span>
                                            <input type="file" @change="getFiles($event)" style="width: 213px;">
                                        </div>
                                    </div>
                                    <div class="form-actions" style="margin: 20px -10px 0px -10px;">
                                        <button type="submit" class="btn btn-primary"
                                            v-on:click="upsertStation($event)">提交</button>
                                        <button type="button" class="btn btn-primary"
                                            v-on:click="location.reload()">返回</button>
                                    </div>

                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<div th:replace="main::common_js"></div>
<script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/elementui/index.js}"></script>
<script th:inline="javascript" th:src="@{/js/tools.js}"></script>
<script th:inline="javascript">
    //<![CDATA[
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true,
            isEdit: false,
            stationData: {
                id: '',
                stationName: '',
                stationArea: '',
                energyCode: '',
                batteryCode: '',
                temperatureCode:'',
                energyPointId: '',
                batteryPointId: '',
                temperaturePointId:'',
                prov: '',
                city: '',
                area: '',
                buildingArea: '',
                constructionYear: '',
                stationAdress: '',
                cityCode: '',
                logo : '',
            },
            table: {},
            provs: [],
            citys: [],
            areas: [],
            options: [],
        },
        created: function () {
            let that = this
            $.getJSON("/multipower/js/area_seletor/data.json", function (data) {
                that.table = data
                for (key in data) {
                    that.provs.push(key)
                }
            })
            that.getCodeOptions();
        },
        mounted: function () {
            parent.modifyTitle('基本信息')
        },
        methods: {
            temperatureChange:function () {
                for(let i in this.options){
                    if(this.stationData.temperaturePointId==this.options[i].value){
                        this.stationData.temperatureCode = this.options[i].code;
                    }
                }
            },
            batteryChange: function () {
                for(let i in this.options){
                    if(this.stationData.batteryPointId==this.options[i].value){
                        this.stationData.batteryCode = this.options[i].code;
                    }
                }
            },
            energyChange:function (e) {
                for(let i in this.options){
                    if(this.stationData.energyPointId==this.options[i].value){
                        this.stationData.energyCode = this.options[i].code;
                    }
                }
            },
            getCodeOptions:function () {
                let that = this;
                $.ajax({
                    type:'GET',
                    url:'/multipower/point/getAll',
                    success:function (data) {
                        if(data.status==1){
                            let res = [];
                            for(let i=0;i<data.data.length;i++){
                                res.push({
                                    value: data.data[i].id,
                                    label: data.data[i].pointName,
                                    code: data.data[i].devCode,
                                });
                            }
                            that.options = [...res];
                        }else{
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    failure:function (data) {
                        layer.alert(data.msg, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
            },
            toEditStationInfo: function (e) {
                let that = this
                id = e.currentTarget.getAttribute("id");
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/multipower/StationInfo/infoEdit?id=" + id,
                    success: function (data) {
                        if (data.id && data.stationName) {
                            that.$set(that.stationData, "id", data.id)
                            that.$set(that.stationData, "stationName", data.stationName)
                            that.$set(that.stationData, "stationArea", data.stationArea)
                            that.$set(that.stationData, "energyCode", data.energyCode)
                            that.$set(that.stationData, "energyPointId", data.energyPointId)
                            that.$set(that.stationData, "batteryCode", data.batteryCode)
                            that.$set(that.stationData, "batteryPointId", data.batteryPointId)
                            that.$set(that.stationData, "temperatureCode", data.temperatureCode)
                            that.$set(that.stationData, "temperaturePointId", data.temperaturePointId)
                            let prov_city_area = data.stationArea.split(",")
                            that.$set(that.stationData, "prov", prov_city_area[0])
                            that.selectForProvCityArea('prov')
                            that.$set(that.stationData, "city", prov_city_area[1])
                            that.selectForProvCityArea('city')
                            that.$set(that.stationData, "area", prov_city_area[2])
                            that.$set(that.stationData, "buildingArea", data.buildingArea)
                            that.$set(that.stationData, "constructionYear", data.constructionYear)
                            that.$set(that.stationData, "stationAdress", data.stationAdress)
                            that.$set(that.stationData, "cityCode", data.cityCode)
                            that.isEdit = true
                            that.isShow = false
                            that.$forceUpdate();
                        } else {
                            window.parent.layerAlert('获取待编辑信息失败', {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    error: function () {
                        window.parent.layerAlert('获取待编辑信息失败', {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
            },
            getFiles: function (e) {
                that = this;
                const reader = new FileReader();
                reader.readAsDataURL(e.target.files[0]);
                reader.onload = (event) => {
                    var Base64Val = event.target.result;
                    that.stationData.logo = Base64Val;
                }
            },
            upsertStation: function (e) {
                let strategyCode = e.currentTarget.getAttribute('id')
                that = this;
                if (this.verificationInputRules(that.stationData)) {
                    $.ajax({
                        type: "POST",
                        dataType: "text",
                        contentType: "application/json",
                        url: "/multipower/StationInfo/editInfo",
                        data: JSON.stringify(that.stationData),
                        success: function (data_raw) {
                            if (data_raw == 'success') {
                                location.reload()
                                that.isEdit = false
                                that.isShow = true
                            } else {
                                window.parent.layerAlert('编辑失败', {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        error: function (data) {
                            window.parent.layerAlert('编辑失败(' + data.statusText + ")", {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                    // 隐藏策略展示残留的表格插件加入信息
                    $("#tableContainer_wrapper").hide()
                }
            },
            verificationInputRules: function (data) {
                if (!data.stationName) {
                    window.parent.layerAlert('名称不能为空', {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }

                if (!data.stationArea) {
                    window.parent.layerAlert('地区不能为空', {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }
                return true;
            },
            selectForProvCityArea: function (type) {
                let that = this
                if (type == 'prov') {
                    that.citys.splice(0, that.citys.length)
                    that.areas.splice(0, that.areas.length)
                    that.$set(that.stationData, "city", '')
                    that.$set(that.stationData, "area", '')
                    for (key in that.table[that.stationData.prov]) {
                        that.citys.push(key)
                    }
                } else if (type == 'city') {
                    that.areas.splice(0, that.areas.length)
                    that.$set(that.stationData, "area", '')
                    let areas = that.table[that.stationData.prov][that.stationData.city]
                    for (key in that.table[that.stationData.prov][that.stationData.city]) {
                        that.areas.push(key)
                    }
                } else if (type == 'area') {
                    that.$set(that.stationData, "cityCode", that.table[that.stationData.prov][that.stationData.city][that.stationData.area])
                    that.$set(that.stationData, "stationArea", that.stationData.prov + "," + that.stationData.city + "," + that.stationData.area)
                }
            }
        }
    })
    //]]>

</script>


<script th:inline="javascript">
    breadcrumb()
    window.onload = function () {
        parent.modifyTitle('基本信息管理')
    }
</script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>



</body>

</html>